import React, { Component } from 'react';
import {  Flex, WingBlank,Badge } from 'antd-mobile';
import { myHead ,myHeadTwo} from './myHeader.less';
import {connect} from "dva";
import {routerRedux} from "dva/router";
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import { isToken } from '../../utils/judgmentEquipment';

class MyHeader extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isGoods:1,
            isStore:2,
        };
    }

    render() {
        const { data} = this.props;
        const {avatar=""} =data;
        return (
            <div className={isToken()?myHead:myHeadTwo}>
                <WingBlank>
                    <Flex justify="end" className="header_icon">
                        <div className="header_icon_liuyan" onClick={ e => {if(this.props.token!=null) this.props.dispatch(routerRedux.push({pathname: "/messagesCenter"}))} }/>
                        <div className="header_icon_shezhi" onClick={() =>  this.props.dispatch(routerRedux.push(`/accountManagement`)) }/>
                    </Flex>
                    <Flex >

                            {isToken()?<div style={{width:"1.2rem",height:"1.2rem",borderRadius:"100%"}}>{
                                    avatar==""||avatar==undefined?<img src={require("../../assets/img/myAvatarTwo.png" )} onClick={() => this.props.dispatch(routerRedux.push(`/accountManagement`)) } style={{height:"1.2rem",width:"1.2rem",borderRadius:"100%"}} alt=""/>:
                                    <NoLazyImg src={avatar } onClick={() => this.props.dispatch(routerRedux.push(`/accountManagement`)) } style={{height:"1.2rem",width:"1.2rem",borderRadius:"100%"}} alt=""/>}
                                </div>:
                                <div style={{width:"1.2rem",height:"1.2rem",borderRadius:"100%",background:"#fff",textAlign:"center"}}><img src={require("../../assets/img/myAvatar.png" )} onClick={() => this.props.dispatch(routerRedux.push(`/accountManagement`)) } style={{height:"1.2rem",width:"1.2rem",borderRadius:"100%"}} alt=""/></div>
                            }
                        <div style={{color:"#ffffff",marginLeft:".3rem"}}>
                            <Flex style={{marginBottom:".2rem"}}>
                                {
                                    isToken() ? <div className="name" onClick={() => this.props.dispatch(routerRedux.push(`/accountManagement`))}>{ data.truename || data.name}</div> : <div className="name" onClick={() => this.props.dispatch(routerRedux.push('/login'))}>登录/注册</div>
                                }

                                {
                                    isToken() ?
                                    <div className="modify_name" onClick={()=>{
                                        if(this.props.token!=null){
                                        this.props.dispatch(routerRedux.push({
                                            pathname:`/makeName/${data.truename}`
                                        }))}
                                    }}/> : ''
                                }
                            </Flex>
                            <Flex>
                                <div className="member_logo"/>
                                <div>{ data.gradeName || '无' }</div>
                            </Flex>
                        </div>
                    </Flex>
                    <Flex style={{backgroundColor:"#fff",margin:"0 auto"}} className="header_list" justify="between">
                        <div onClick={()=>{
                            if(this.props.token!=null){
                            this.props.dispatch(routerRedux.push({
                                pathname: `/collectionList/${this.state.isGoods}`,
                            }));}
                        }}>
                            <p>{data.favGoodsCount||0}</p>
                            <p>商品收藏</p>
                        </div>
                        <div style={{height:'0.6rem',border:".01rem solid #e5e5e5",width:"1px"}}/>
                        <div onClick={()=>{
                            if(this.props.token!=null){
                            this.props.dispatch(routerRedux.push({
                                pathname: `/collectionList/${this.state.isStore}`,
                            }));}
                        }}>
                            <p>{data.favStoreCount||0}</p>
                            <p>店铺收藏</p>
                        </div>
                        <div style={{height:'0.6rem',border:".01rem solid #e5e5e5",width:"1px"}}/>
                        <div onClick={()=>{
                            if(this.props.token!=null){
                            this.props.dispatch(routerRedux.push({
                                pathname: `/footPrint`,
                            }));}
                        }}>
                            <p>{data.browseCount||0}</p>
                            <p>我的足迹</p>
                        </div>
                    </Flex>
                </WingBlank>
            </div>
        );
    }
}

export default connect(({ myHeader }) => ({ myHeader }))(MyHeader);
